<!-- 交接内容 -->
<template>
  <div class="wrap" v-if="formData?.userData">
    <a-form ref="refForm" auto-label-width :model="formData.userData">
      <section>
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              基础信息
            </div>
          </div>
        </div>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item field="name" label="离职人员名称" show-colon>
              <a-input v-model="formData.userData.name" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="mobile" label="手机号码" show-colon>
              <a-input v-model="formData.userData.mobile" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="mobile" label="部门" show-colon>
              <a-input v-model="formData.userData.departmentName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="mobile" label="职位" show-colon>
              <a-input v-model="formData.userData.positionName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="mobile" label="直接上级" show-colon>
              <a-input v-model="formData.userData.superiorName" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item field="mobile" label="离职时间" show-colon>
              <a-input v-model="formData.userData.leaveTime" disabled />
            </a-form-item>
          </a-col>
        </a-row>
      </section>
    </a-form>
    <a-form :model="formData?.designData" ref="refForm">
      <section v-if="formData?.designData?.wenJian?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              文件移交
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('wenJian')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.wenJian"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="文件名称" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">文件名称</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`wenJian.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="文件交接说明"
                :width="200"
                dataIndex="remark"
              >
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      v-model="record.remark"
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="数量" :width="200" dataIndex="num">
                <template #title>
                  <span class="star">数量</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`wenJian.${rowIndex}.num`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input-number hide-button :min="1" v-model="record.num" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`wenJian.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('wenJian', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('wenJian', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('wenJian', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('wenJian', 1)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>

      <section v-if="formData?.designData?.riChang?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              日常工作移交
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('riChang')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.riChang"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="工作事项" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">工作事项</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`riChang.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="工作事项情况说明"
                :width="200"
                dataIndex="remark"
              >
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      v-model="record.remark"
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`riChang.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('riChang', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('riChang', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('riChang', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('riChang', 2)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>

      <section v-if="formData?.designData?.unFinished?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              未完成事项
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('unFinished')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.unFinished"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="事项" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">事项</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`unFinished.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="完成情况"
                :width="200"
                dataIndex="situation"
              >
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                      v-model="record.situation"
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="事项情况说明"
                :width="200"
                dataIndex="remark"
              >
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      v-model="record.remark"
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="完成时间" :width="200" dataIndex="endTime">
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-date-picker
                      format="YYYY-MM-DD"
                      v-model="record.endTime"
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`unFinished.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('unFinished', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('unFinished', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('unFinished', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('unFinished', 3)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>

      <section v-if="formData?.designData?.daiBan?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              待办事项
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('daiBan')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.daiBan"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="事项" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">事项</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`daiBan.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="完成情况"
                :width="200"
                dataIndex="situation"
              >
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                      v-model="record.situation"
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="事项情况说明"
                :width="200"
                dataIndex="remark"
              >
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      v-model="record.remark"
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="完成时间" :width="200" dataIndex="endTime">
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-date-picker
                      format="YYYY-MM-DD"
                      v-model="record.endTime"
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`daiBan.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('daiBan', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('daiBan', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('daiBan', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('daiBan', 4)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>

      <section v-if="formData?.designData?.ziChan?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              资产移交
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('ziChan')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.ziChan"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="资产名称" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">资产名称</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`ziChan.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="数量" :width="200" dataIndex="num">
                <template #title>
                  <span class="star">数量</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`ziChan.${rowIndex}.num`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input-number hide-button :min="1" v-model="record.num" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="用途" :width="200" dataIndex="remark">
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      v-model="record.remark"
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`ziChan.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('ziChan', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('ziChan', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('ziChan', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('ziChan', 5)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>

      <section v-if="formData?.designData?.ziYuan?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              资源移交
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('ziYuan')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.ziYuan"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="资源名称" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">资源名称</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`ziYuan.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="资源上传" :width="200" dataIndex="url">
                <!-- <template #title>
                  <span class="star">资源上传</span>
                </template> -->
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <UploadFile
                      class="file"
                      :ref="(e, ind) => setRefs(e, rowIndex)"
                      :fileList="
                        JSON.parse(record?.url !== '' ? record?.url : '[]')
                      "
                      :draggable="false"
                      tip="请上传JPG、JPEG、PNG、DOC、DOCX、PDF、EXCEL、XLSX、XLS格式"
                      :fileTypeList="fileTypeList"
                      :userId="userId"
                      :type="2"
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`ziYuan.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('ziYuan', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('ziYuan', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('ziYuan', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('ziYuan', 6)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>

      <section v-if="formData?.designData?.other?.length > 0">
        <div class="title-box">
          <div class="title">
            <div
              :style="{
                marginLeft: '20px'
              }"
            >
              其他交接事项
            </div>
            <div>
              <a-popconfirm content="是否删除该项？" @ok="del('other')">
                <a-tooltip content="删除" position="left">
                  <IconFont
                    class="icon"
                    type="icon-delete"
                    :size="24"
                  ></IconFont>
                </a-tooltip>
              </a-popconfirm>
            </div>
          </div>
        </div>
        <a-form-item hide-label no-style>
          <a-table
            :row-selection="rowSelection"
            :data="formData?.designData?.other"
            :pagination="false"
            :bordered="{ cell: true }"
          >
            <template #columns>
              <a-table-column title="序号" :width="50">
                <template #cell="{ rowIndex }">
                  {{ rowIndex + 1 }}
                </template>
              </a-table-column>
              <a-table-column title="事项名称" :width="200" dataIndex="name">
                <template #title>
                  <span class="star">事项名称</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`other.${rowIndex}.name`"
                    :rules="record.name !== '' ? rulesInput : ''"
                  >
                    <a-input v-model="record.name" />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="事项说明" :width="200" dataIndex="remark">
                <template #cell="{ record }">
                  <a-form-item hide-label>
                    <a-textarea
                      v-model="record.remark"
                      style="width: 300px"
                      show-word-limit
                      :max-length="1000"
                      allow-clear
                    />
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="接收人" :width="200" dataIndex="acceptId">
                <template #title>
                  <span class="star">接收人</span>
                </template>
                <template #cell="{ record, rowIndex }">
                  <a-form-item
                    hide-label
                    :field="`other.${rowIndex}.acceptId`"
                    :rules="record.name !== '' ? rulesAcceptId : ''"
                  >
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.acceptId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('other', 1, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column
                title="监督人"
                :width="200"
                dataIndex="superviseId"
              >
                <template #cell="{ record, rowIndex }">
                  <a-form-item hide-label>
                    <a-select
                      :popup-visible="false"
                      placeholder="请选择"
                      v-model="record.superviseId"
                      allow-search
                      allow-clear
                      @popup-visible-change="
                        showHumanModal('other', 2, rowIndex)
                      "
                    >
                      <a-option
                        v-for="item in humanList"
                        :key="item.id"
                        :value="item.id"
                        :label="item.name"
                      ></a-option>
                    </a-select>
                  </a-form-item>
                </template>
              </a-table-column>
              <a-table-column title="操作" :width="80" dataIndex="option">
                <template #cell="{ rowIndex }">
                  <a-tooltip content="删除" position="left">
                    <a-popconfirm
                      content="是否确认删除该条数据?"
                      @ok="delSub('other', rowIndex)"
                    >
                      <IconFont
                        type="icon-delete"
                        :size="26"
                        :style="{
                          marginBottom: '18px',
                          cursor: 'pointer'
                        }"
                      />
                    </a-popconfirm>
                  </a-tooltip>
                </template>
              </a-table-column>
            </template>
          </a-table>
          <div class="add">
            <a-button type="text" @click="addSub('other', 7)">
              <template #icon>
                <icon-plus />
              </template>
              新增
            </a-button>
          </div>
        </a-form-item>
      </section>
    </a-form>
  </div>
  <HumanRosterModal
    style="z-index: 9999"
    v-model:visible="humanModalVisible"
    @humanRosterEmit="humanRosterEmit"
  ></HumanRosterModal>
</template>
<script lang="ts" setup>
import { useVModel } from '@vueuse/core';
import { Modal, Message } from '@arco-design/web-vue';
import {
  GetLeaveQuitDetail,
  DelWorkHandleSub
} from '@/apis/management/human/baseSetting/leaveSetting';
import { cloneDeep } from 'lodash';
import { getAllHumanRoster } from '@/utils/common';
import { PostFile } from '@/apis/management/base';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const userId = +localStorage.getItem('userId');
const formData = useVModel(props, 'data', emit);

const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
});
// 输入框校验
const rulesInput = [
  {
    required: true,
    message: '请输入'
  }
];

// 选择框校验
const rulesSelect = [
  {
    required: true,
    message: '请选择'
  }
];

// 文件
const rulesFile = [
  {
    required: true,
    message: '请上传'
  }
];

// 接收人校验
const rulesAcceptId = [
  {
    required: true,
    message: '请上传'
  },
  {
    validator: (value: any, callback: any) => {
      if (value <= 0) {
        return callback('请选择接收人');
      }
    }
  }
];

let humanList = ref();
const getAllHumanList = async () => {
  const res = await getAllHumanRoster();
  humanList.value = res;
};
getAllHumanList();
// 还未发起过交接的时候处理模板的ownerId为undefined 否则ownerId为该条数据的id
const handleOwnerId = (data: []) => {
  // let flag = props.data.baseInfo.id ? true : false;
  let id = props.data.baseInfo.id || undefined;
  const temp = data.map((el: any) => {
    if (id) {
      el.ownerId = id;
    } else {
      el.ownerId = undefined;
      el.id = undefined;
    }
    return el;
  });
  return temp;
};

let isFirst = ref(true);
watch(
  () => props.data.baseInfo.templateId,
  async (newVal: number) => {
    try {
      console.log('=========props.data===========================');
      console.log(props.data);
      console.log('====================================');
      if (props.data.baseInfo?.id && isFirst.value) {
        formData.value.designData = props.data;
        isFirst.value = false;
      } else {
        const res = await GetLeaveQuitDetail({
          id: newVal
        });
        for (let key in res) {
          if (key !== 'baseInfo') {
            res[key] = handleOwnerId(res[key]);
          }
        }
        formData.value.designData = res;
      }
    } catch (error: unknown) {
      console.log(error);
    }
  },
  {
    deep: true
    // immediate: true
  }
);

const fileTypeList = [
  '.png',
  '.jpeg',
  '.jpg',
  '.doc',
  '.docx',
  '.pdf',
  '.xls',
  '.xlsx'
];
let uploadRefs = ref({});
const setRefs = (e, ind) => {
  uploadRefs.value[ind] = e;
};
// 处理资源移交文件数据结构
const filterDefaultFileList = (record: any) => {
  if (record) {
    if (JSON.parse(record).url === '') {
      return [];
    } else {
      return [JSON.parse(record)];
    }
  } else return [];
};

// watch(
//   () => props.data,
//   (newVal) => {
//     formData.value.designData = newVal;
//     console.log('===========newValnewValnewVal=========================');
//     console.log(newVal);
//     console.log('====================================');
//   }
// );

const addInfo = {
  name: '',
  remark: '',
  num: 1,
  acceptId: undefined, // 接收人Id
  acceptName: '',
  superviseId: undefined, // 监督人
  superviseName: '',
  type: 1,
  ownerId: undefined, // 模板id
  url: ''
};

// 新增一项
const addSub = (key: string, type: 1 | 2 | 3 | 4 | 5 | 6 | 7) => {
  const temp = cloneDeep(addInfo);
  temp.type = type;
  temp.ownerId = formData.value.baseInfo?.id || undefined;
  formData.value.designData[key].push(temp);
};

let delIds = [];
// 删除一个大类
const del = (key: string) => {
  // 如果是编辑的情况下删
  if (formData.value.designData[key][0].id) {
    formData.value.designData[key].forEach((el: any) => {
      delIds.push(el.id);
    });
  }

  delete formData.value.designData[key];
};

const delSub = (key: string, index: number) => {
  // 如果是编辑的情况下删
  if (formData.value.designData[key][0].id) {
    delIds.push(formData.value.designData[key][index].id);
  }
  formData.value.designData[key].splice(index, 1);
};

let humanModalVisible = ref(false);

let currKey = ref(''),
  currType = ref(1),
  currIndex = ref(-1);
//
/**
 * 显示人员弹框
 * @param key 每个大类的key
 * @param type 1接收人 2监督人
 * @param index 数组下标
 */

const showHumanModal = (key: string, type: 1 | 2, index: number) => {
  humanModalVisible.value = true;
  currKey.value = key;
  currType.value = type;
  currIndex.value = index;
};
const humanRosterEmit = (record: any) => {
  if (currType.value === 1) {
    formData.value.designData[currKey.value][currIndex.value].acceptId =
      record.id;
    formData.value.designData[currKey.value][currIndex.value].acceptName =
      record.name;
  } else if (currType.value === 2) {
    formData.value.designData[currKey.value][currIndex.value].superviseId =
      record.id;
    formData.value.designData[currKey.value][currIndex.value].superviseName =
      record.name;
  }
};

let refForm = ref();
const validate = async () => {
  const check = await refForm.value.validate();
  return check;
};
defineExpose({ formData, validate, delIds, uploadRefs });
</script>

<style scoped lang="less">
.wrap {
  width: 90%;
  margin: 20px auto;

  section {
    margin-bottom: 20px;
    .title-box {
      position: relative;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 36px;
        border-radius: 4px;
        font-weight: 700;
        background: #edeffd;
      }

      &::before {
        position: absolute;
        // top: 33px;
        left: 10px;
        display: inline-block;
        height: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        margin-right: 20px;
        border-radius: 2px;
        // transform: translateY(-50%);
        content: '';
        background-color: #165dff;
      }
      .icon {
        cursor: pointer;
        margin-right: 20px;
      }
    }

    .star::before {
      content: '*';
      color: red;
    }
    .add {
      background-color: #fff;
      border: 1px solid #eee;
      color: #3d7eff;
      padding: 10px;
      text-align: center;
    }
  }

  footer {
    height: 50px;
    width: calc(100% - 100px);
    background-color: #fff;
    box-shadow: 1px -1px 10px 0 #cacaca;
    position: fixed;
    bottom: 0;
    left: 10%;
    display: flex;
    justify-content: center;
    align-items: center;

    .btn {
      width: 120px;
      height: 40px;
      border-radius: 5px;
    }
  }
}
:deep(.arco-input-wrapper),
:deep(.arco-textarea-wrapper) {
  border-style: none;
}

:deep(.arco-upload-wrapper) {
  text-align: center;
}

:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 30px;
}

:deep(.arco-table-th) {
  font-weight: 700;
}

:deep(.arco-table-cell) {
  justify-content: center;
  text-align: center;
}
</style>
